<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>标签/语音标注详情</title>
    <link rel="stylesheet" href="../../../assert/css/font.css"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap.min.css">
    <link href="../../../assert/css/plugin/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../../../assert/css/plugin/toastr/toastr.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../../assert/css/plugin/chosen/chosen.css">
    <link href="../../../assert/css/loaders.css" rel="stylesheet">
    <link href="../../../assert/css/plugin/jsTree/themes/default/style.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/jsTree/themes/default/style.css}">
    <link rel="stylesheet" href="../../../assert/css/animate.min.css" th:href="@{/assert/css/animate.min.css}"/>
    <link rel="stylesheet" href="../../../assert/css/subpagesCss/detail.css" th:href="@{/assert/css/subpagesCss/detail.css(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}">
</head>
<body>
<!--删除标签确认框-->
<div class="modal fade" id="tagDelModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span
                            class="sr-only">Close</span></button>
                    <h4 class="modal-title">删除标签</h4>
                </div>
                <div class="modal-body">
                    <div style="text-align: center"><span class="fa fa-question-circle"></span>确实要删除 <span
                            id="delName"></span>吗？
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="delBtn">确定</button>
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--删除规则确认框-->
<div class="modal fade" id="errorTagModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span
                            class="sr-only">Close</span></button>
                    <h4 class="modal-title">匹配错误</h4>
                </div>
                <div class="modal-body">
                    <div style="text-align: center">
                        <div class="form-group">
                            <label for="" class="col-sm-3 control-label" style="width:12%;"><span class="respan">*</span>备注:</label>
                            <div class="col-sm-8" style="width: 87.6%;">
                                <textarea name="note" class="form-control" style="height:70px;" id="remark"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="tagErrorBtn">确定</button>
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--提交标注确认框-->
<div class="modal fade" id="bzModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" style="margin-top: 113px;width: 721px;">
        <div class="modal-content">
            <form method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span
                            class="sr-only">Close</span></button>
                    <h4 class="modal-title">确认</h4>
                </div>
                <div class="modal-body">
                    <div style="text-align: center"><span class="fa fa-question-circle"></span>确实要提交标注吗？</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="bzSubmitBtn">确定</button>
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--头部基本信息-->
<fieldset class="base">
    <legend class="on hidden" data-title="概况">
        概况 <span class="fa fa-angle-down"></span>
    </legend>
    <div class="fieldset_box" >
        <div class="baseBox" style="overflow: hidden;height:60px;">
            <ul class="baseUl">
                <li style="width:800px;">录音流水号:<span id="audioId" style="max-width:700px;"></span></li>
            </ul>
            <ul class="baseUl">
                <li>坐席班组:<span id="seatGroup"></span></li>
                <li>坐席工号:<span id="seatWorker"></span></li>
                <li>姓名:<span id="seatName"></span></li>
                <li>客户归属地:<span id="customerloc"></span></li>
                <li>客户星级:<span id="customerLevel"></span> <i style="cursor:pointer;margin-left:15px;color: #337ab7;" id="baseChange">展开<b class="fa fa-angle-double-down"></b></i></li>
            </ul>
            <ul class="baseUl">
                <li>通话开始时间:<span id="phoneStartTime"></span></li>
                <li>通话结束时间:<span id="phoneEndTime"></span></li>
                <li>通话时长:<span id="timeDur">38</span></li>
                <li>受理号码:<span id="proPhoneNum"></span></li>
                <li>客户号码:<span id="phone"></span></li>
            </ul>
            <ul class="baseUl">
                <li>满意度:<span id="satisfaction"></span></li>
                <li>呼叫类型:<span id="callType"></span></li>
                <li>挂机方:<span id="onHook"></span></li>
                <li style="width:15%">是否重复来电:<span id="reCallFlag"></span></li>
            </ul>
        </div>
        <div class="wave_box">
            <div class="wave">
                <div class="speakerModel-player"></div>
                <div class="waveTime_one"></div>
                <div id="sp-player-wrapper">
                    <div id="sp-player-loadDiv" class="progress progress-striped active"
                         style="display:block;position: absolute;top: 54%;">
                        <div id="sp-player-loadBar" class="progress-bar progress-bar-info" role="progressbar"
                             aria-valuenow="0"
                             aria-valuemin="0" aria-valuemax="100">0%
                        </div>
                    </div>
                </div>
                <div class="btn-group-wrapper">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-sm" title="播放/暂停" data-action="speakerModel-play-btn"
                                onclick="wave.playPause()" id="playStopTab" style="color:#337ab7"><span
                                class="glyphicon glyphicon-play"></span>
                        </button>
                        <button type="button" class="btn btn-sm" title="停止" data-action="speakerModel-stop-btn"
                                onclick="wave.stop()"><span
                                class="glyphicon glyphicon-stop"></span></button>
                        <button type="button" class="btn btn-sm" title="快退"
                                data-action="speakerModel-skip-backward-btn"
                                onclick="wave.skipBackward(wave.skipLength)"><span
                                class="glyphicon glyphicon-backward"></span></button>
                        <button type="button" class="btn btn-sm" title="快进"
                                data-action="speakerModel-skip-forward-btn"
                                onclick="wave.skipForward(wave.skipLength)"><span
                                class="glyphicon glyphicon-forward"></span></button>
                        <button type="button" class="btn fa fa-search-minus" href="#"
                                onclick="wave.zoomAudioOut()" title="缩小波形"></button>
                        <div class="btn-group" style="width:100px;display: none;"><!-- type="range" 有step限制-->
                            <input id="myPlayer-room-input" min="1" max="100" value="1"
                                   width=100 height=22/>
                        </div>
                        <button type="button" class="btn fa fa-search-plus" href="#"
                                onclick="wave.zoomAudioIn()" title="放大波形"></button>
                        <button type="button" class="btn fa fa-dot-circle-o" href="#"
                                onclick="wave.zoomAudio()" title="全波形"></button>
                        <button type="button" class="btn btn-sm audioBtn prePhone hidden" title="上一条语音"><span
                                class="glyphicon glyphicon-arrow-up"></span></button>
                        <button type="button" class="btn btn-sm audioBtn nextPhone hidden" title="下一条语音"><span
                                class="glyphicon glyphicon-arrow-down"></span></button>

                        <span style="margin-left:20px;">语速：</span><select name="" id="audioSpeed"></select>
                        <span style="margin-left:20px;">总时长：<b id="totalTime">0</b></span>

                        <span style="margin-left:20px;">跳转到:
                            <input type="text" class="waveInput hour" placeholder="时" autocomplete="off" disabled><i class="waveText">时</i>
                            <input type="text" class="waveInput minute" placeholder="分" autocomplete="off" disabled><i class="waveText">分</i>
                            <input type="text" class="waveInput seconds" placeholder="秒" autocomplete="off" disabled><i class="waveText">秒</i>
                            <button id="jumpBtn">跳转</button>
                        </span>
                        <span style="margin-left:20px;">当前时间：<b id="nowTime">0</b></span>
                        <shiro:hasPermission name="IS_NEED_BZ">
                            <span class="btn-blue" id="needBz">转写需标注</span>
                        </shiro:hasPermission>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>
<!--底部信息-->
<div class="detail_bottom">
    <div class="detail_left">
        <fieldset>
            <legend class="on" data-title="标签">
                <span style="margin-right:10px;">标签</span>(
                <b class="typeCode type0"></b><i>话务小结</i>
                <b class="typeCode type1"></b><i>系统 </i>
                <b class="typeCode type2"></b><i>人工 </i>
                )
                <span class="fa fa-angle-up"></span>
            </legend>
            <div class="fieldset_box">
                <shiro:hasPermission name="TAG_BTN">
                    <button class="fa-btn btn-primary noPer" title="添加标签" id="plusTag">添加标签</button>
                </shiro:hasPermission>
                <ul class="tags">

                </ul>
            </div>
        </fieldset>
        <fieldset class="audio_box" style="margin-bottom:3px">
            <legend class="on" data-title="录音内容">
                录音内容 <span class="fa fa-angle-up"></span>
            </legend>
            <div class="fieldset_box" style="padding-top: 12px;">
                <ul class="stt_box scrollbar">

                </ul>
            </div>
        </fieldset>
    </div>
    <div class="detail_right">
        <fieldset style="margin-bottom:3px;" class="tab2">
            <legend class="on" data-title="">
                <span id="tagMark" class="markSpan on" data-code="tag">标签语义匹配</span>
                <span id="semanticMark" class="markSpan" data-code="semantic">数据挖掘语义匹配</span>
                <span class="fa fa-angle-up"></span>
            </legend>
            <div class="fieldset_box">
                <div class="table_box scrollbar">
                    <table id="table" class="tableDetail tagTable on"></table>
                    <table id="tableS" class="tableDetail semanticTable"></table>
                </div>
            </div>
        </fieldset>
    </div>
</div>
<div th:text="${serialNumber}" id="serialNumber" class="hidden"></div>
<div th:text="${scenes}" id="scenes" class="hidden"></div>
<div th:text="${source}" id="source" class="hidden"></div>
<div th:text="${userIdentity}" id="userIdentity" class="hidden"></div>
<input type="hidden" id="tagId" value="" class="form-control search_input">
<input type="hidden" id="areaId" value="" class="form-control search_input">
<input type="hidden" id="tagType" value="" class="form-control search_input">

<a id="basePath" th:href="@{/}"></a>
<script src="../../../assert/js/jquery.js"></script>
<script src="../../../assert/js/base.js"></script>
<script src="../../../assert/js/wavesurfer.min.js"></script>
<script src="../../../assert/js/plugin/wavesurfer.timeline.min.js"></script>
<script src="../../../assert/js/plugin/wavesurfer.regions.min.js"></script>
<script src="../../../assert/js/bootstrap.min.js"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="../../../assert/js/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../../../assert/js/plugin/toastr/toastr.min.js"></script>
<script src="../../../assert/js/common.js"></script>
<script src="../../../assert/js/plugin/chosen/chosen.jquery.js"></script>
<script src="../../../assert/js/plugin/jsTree/jstree.min.js"></script>
<script src="../../../assert/js/colResizable-1.6.min.js"></script>
<script src="../../../assert/js/jquery.mousewheel.js"></script>
<script src="../../../assert/js/changeTime.js"></script>
<script src="../../../assert/js/detailCommon.js" th:src="@{/assert/js/detailCommon.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>

<script>
    var resize = {
        init: function () {
            resize.me();
            $(window).resize(function () {
                resize.me();
            })
        },
        me: function () {
            var winW = $(window).width();
            var winH = $(window).height();
            var tabW = $(".detail_right").width();
            $(".baseUl li span").each(function(){
                $(this).css({"maxWidth":($(this).parent("li").width()-135)+"px"});
            });
            $(".speakerModel-player").width(winW - 40);
            $("#sp-player-loadDiv").width(winW - 40);
            $("#modelTableWin").width(tabW - 195);
            $(".stt_box").height(winH - 260 - $('.tags').height()-95);
            $("#jstree").height(winH - 260 - 12-3-30);
            $(".detail_right .model_right").width($(".detail_right .selectModel").width()-150);
            if ($("#appealAllBtn").css("display") == "none") {
                $(".table_box").height(winH - 260 - 42 - 20-3);
            } else {
                $(".table_box").height(winH - 260 - 42 - 35 - 9-3);
            }
            $(".tab1 .fixed-table-body").css("maxHeight",(winH - 260 - 100)+"px");
            $(".tab1 .fixed-table-body").css("maxWidth",($(".detail_right").width()- 175-3)+"px");
            $("#tagModal .fixed-table-body").css("maxHeight",430+"px");
            $(".tab1 .fixed-table-body").css("minHeight","200px");
            $(".table_box").css("minHeight",(winH - 260 - 35)+"px");

        }
    };
    var tools = {
        init: function () {
            tools.tabDetail();
        },
        tabDetail:function(){
            $(".markSpan").on('click',function(e){
                e.stopPropagation();
                var code = $(this).attr('data-code');
                $(this).addClass('on').siblings('.markSpan').removeClass('on');
                $('.tableDetail').parents('.bootstrap-table').hide();
                $('.tableDetail').removeClass('on');
                $('.'+code+'Table').addClass('on');
                $('.'+code+'Table').parents('.bootstrap-table').show();
            })
        }
    };
    var TableInit = function () {
        var oTableInit = new Object();
        var url = basePath + "/rest/tagging/tagging-list";
        //初始化Table
        oTableInit.Init = function () {
            $('#table').bootstrapTable({
                url: url,         //请求后台的URL（*）
                method: 'post',                      //请求方式（*）
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                sortable: true,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                responseHandler: function (res) {
                    if (res.code != 0) {
                        toastrCog.error(res.msg, 3000)
                    }
                    return {
                        "total": res.data.length,//总页数
                        "rows": res.data   //数据
                    };
                },
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                contentType: "application/x-www-form-urlencoded",
                strictSearch: true,
                showColumns: false,                  //是否显示所有的列
                showRefresh: false,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: false,                //是否启用点击选中行
                uniqueId: "no",                     //每一行的唯一标识，一般为主键列
                showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: true,
                cellStyle: {
                    css: {"background-color": "#fff"}
                },//是否显示父子表
                onClickRow: function (row, tr) {
                    tr.find(".detail-icon").click();
                },
                onResetView:function(){
                    if(rule.isOpen){
                        $("#table thead tr th:last").html('<a href="javascript:;" class="detail-icon" style="margin-left: 8px;" title="全部收起"><i class="glyphicon glyphicon-chevron-up"></i></a>');
                    }else{
                        $("#table thead tr th:last").html('<a href="javascript:;" class="detail-icon" style="margin-left: 8px;" title="全部展开"><i class="glyphicon glyphicon-chevron-down"></i></a>');
                    }
                },
                columns: [
                    {
                        title: '序号',//标题  可不加
                        width: 60,
                        formatter: function (value, row, index) {
                            return (index + 1) + "";
                        }
                    },
                    {
                        field: 'tagName',
                        title: '标签匹配摘要',
                        formatter: function (value, row, index) {
                            var arr = row.tagDetails;
                            var str = ''
                            if(arr && arr.length>0){
                                for (var i = 0; i < arr.length; i++) {
                                    var matchStatus = arr[i].matchStatus;// 匹配错误
                                    if(matchStatus == '1'){
                                        str='(匹配错误)';
                                        break
                                    }
                                }
                            }
                            return "<div class='abstract'>"+value+"<span>"+str+"</span></div>";
                        }
                    }
                ],
                onLoadSuccess: function (data) {  //加载成功时执行
                    if (!data.total || data.total == 0) {
                        $(".no-records-found").find("td").html('<img src="../../../assert/image/nodata.png" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                    }
                    $(".detail i").attr("class","glyphicon glyphicon-chevron-down");
                    $("#table tbody .detail-icon").on("click", function () {
                        var tr = $(this).parents("tr");
                        if (tr.hasClass("active")) {
                            tr.removeClass("active");
                        } else {
                            tr.addClass("active");
                        }
                        var num=0;//点击tody的icon时 如果全部展开了改变总按钮改为展开状态 如果全部收起了改变总按钮改为收起状态
                        $("#table tbody .detail-icon").each(function(){
                            if($(this).find("i").hasClass("glyphicon-chevron-up")){
                                num++;
                            }else{
                                num--;
                            }
                            if(num!=0){
                                if(Math.abs(num)==data.total){
                                    if(num>0){
                                        rule.isOpen=true;
                                        $("#table thead tr th:last").html('<a href="javascript:;" class="detail-icon" style="margin-left: 8px;" title="全部收起"><i class="glyphicon glyphicon-chevron-up"></i></a>');
                                    }else  if(num<0){
                                        rule.isOpen=false;
                                        $("#table thead tr th:last").html('<a href="javascript:;" class="detail-icon" style="margin-left: 8px;" title="全部展开"><i class="glyphicon glyphicon-chevron-down"></i></a>');
                                    }
                                }
                            }
                        })
                    })
                },
                onLoadError: function () {  //加载失败时执行
                    $(".no-records-found").find("td").html('<img src="../../../assert/image/nodata.png" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                },
                formatLoadingMessage: function () {
                    return '<div class="loaded">' +
                        '<div class="loader">' +
                        '<div class="loader-inner line-scale-pulse-out">' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div>请稍等，数据正在加载中...</div>';
                },      //注册加载子表的事件。你可以理解为点击父表中+号时触发的事件
                onExpandRow: function (index, row, $detail) {
                    //这一步就是相当于在当前点击列下新创建一个table
                    if (row) {
                        var data = row.tagDetails;
                        var explainBox = $('<div class="explainBox">' +
                            '<ul>' +
                                '<li data-tagId="'+row.tagId+'">' +
                                    '<div class="ruleBox">命中时间：' +
                                    '</div>' +
                                '</li>' +
                            '</ul>' +
                            '</div>');
                        var ruleBox = explainBox.find(".ruleBox");
                        for (var i = 0; i < data.length; i++) {
                            var startTime = data[i].startTime;// 开始时间
                            var endTime = data[i].endTime;// 结束时间
                            var matchStatus = data[i].matchStatus;// 匹配错误
                            var proNote = base.isNull(data[i].proNote);// 错误备注
                            ruleBox.append('<div class="timeBox timeBox'+index+i+'" data-index="'+i+'" data-row-index="'+index+'">' +
                                '<span class="ruleTime" data-sTime="' + startTime + '" data-eTime="' + endTime + '"><i class="fa fa-volume-up"></i>' + base.formatSeconds(startTime) + '-' + base.formatSeconds(endTime) + '</span>' +
                                '<button class="btn btn-primary errorBtn">匹配错误</button>' +
                                '<span class="hidden timeRemark">备注:'+proNote+'</>' +
                                '</div>');
                            //匹配错误按钮是否可点
                            if(matchStatus == '1'){
                                ruleBox.find('.timeBox'+index+i).find('.errorBtn').prop('disabled',true)
                            }
                            //是否显示备注 备注不为空显示 备注为空不显示
                            if(proNote){
                                ruleBox.find('.timeBox'+index+i).find('.timeRemark').removeClass('hidden')
                            }
                            var jsonStr = JSON.stringify(data[i]);
                            ruleBox.find('.timeBox').attr("data-detail", jsonStr);
                        }
                        $detail.html(explainBox); // 关键地方
                    }
                }
            });
        };
        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                // workId: $("#workId").html(),
                serialNumber: $("#serialNumber").html()
            };
            return temp;
        };
        return oTableInit;
    };
    var TableInitS = function () {
        var oTableInit = new Object();
        var url = bs.getSysConfig("ZDYW_KEY").value + "/semanticTag/findByIdAndScenes";
        //初始化Table
        oTableInit.Init = function () {
            $('#tableS').bootstrapTable({
                url: url,         //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                sortable: true,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                responseHandler: function (res) {
                    if (res.code != 1) {
                        toastrCog.error(res.message, 3000)
                    }
                    return {
                        "total": res.data.appeals.length,//总页数
                        "rows": res.data.appeals   //数据
                    };
                },
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                contentType: "application/x-www-form-urlencoded",
                strictSearch: true,
                showColumns: false,                  //是否显示所有的列
                showRefresh: false,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: false,                //是否启用点击选中行
                uniqueId: "no",                     //每一行的唯一标识，一般为主键列
                showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: true,
                cellStyle: {
                    css: {"background-color": "#fff"}
                },//是否显示父子表
                onClickRow: function (row, tr) {
                    tr.find(".detail-icon").click();
                },
                onResetView:function(){
                    if(rule.isOpenYu){
                        $("#tableS thead tr th:last").html('<a href="javascript:;" class="detail-icon" style="margin-left: 8px;" title="全部收起"><i class="glyphicon glyphicon-chevron-up"></i></a>');
                    }else{
                        $("#tableS thead tr th:last").html('<a href="javascript:;" class="detail-icon" style="margin-left: 8px;" title="全部展开"><i class="glyphicon glyphicon-chevron-down"></i></a>');
                    }
                },
                columns: [
                    {
                        title: '序号',//标题  可不加
                        width: 60,
                        formatter: function (value, row, index) {
                            return (index + 1) + "";
                        }
                    },
                    {
                        field: 'scene',
                        title: '语义匹配摘要',
                        formatter: function (value, row, index) {
                            var arr = row.appealDetails;
                            var str = ''
                            if(arr && arr.length>0){
                                for (var i = 0; i < arr.length; i++) {
                                    var matchStatus = arr[i].matchStatus;// 匹配错误
                                    if(matchStatus == '1'){
                                        str='(匹配错误)';
                                        break
                                    }
                                }
                            }
                            return "<div class='abstract'>"+value+"<span>"+str+"</span></div>";
                        }
                    }
                ],
                onLoadSuccess: function (data) {  //加载成功时执行
                    if (!data.total || data.total == 0) {
                        $(".no-records-found").find("td").html('<img src="../../../assert/image/nodata.png" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                    }
                    $(".detail i").attr("class","glyphicon glyphicon-chevron-down");
                    $("#tableS tbody .detail-icon").on("click", function () {
                        var tr = $(this).parents("tr");
                        if (tr.hasClass("active")) {
                            tr.removeClass("active");
                        } else {
                            tr.addClass("active");
                        }
                        var num=0;//点击tody的icon时 如果全部展开了改变总按钮改为展开状态 如果全部收起了改变总按钮改为收起状态
                        $("#tableS tbody .detail-icon").each(function(){
                            if($(this).find("i").hasClass("glyphicon-chevron-up")){
                                num++;
                            }else{
                                num--;
                            }
                            if(num!=0){
                                if(Math.abs(num)==data.total){
                                    if(num>0){
                                        rule.isOpenYu=true;
                                        $("#tableS thead tr th:last").html('<a href="javascript:;" class="detail-icon" style="margin-left: 8px;" title="全部收起"><i class="glyphicon glyphicon-chevron-up"></i></a>');
                                    }else  if(num<0){
                                        rule.isOpenYu=false;
                                        $("#tableS thead tr th:last").html('<a href="javascript:;" class="detail-icon" style="margin-left: 8px;" title="全部展开"><i class="glyphicon glyphicon-chevron-down"></i></a>');
                                    }
                                }
                            }
                        })
                    })
                },
                onLoadError: function () {  //加载失败时执行
                    $(".no-records-found").find("td").html('<img src="../../../assert/image/nodata.png" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                },
                formatLoadingMessage: function () {
                    return '<div class="loaded">' +
                        '<div class="loader">' +
                        '<div class="loader-inner line-scale-pulse-out">' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div>请稍等，数据正在加载中...</div>';
                },      //注册加载子表的事件。你可以理解为点击父表中+号时触发的事件
                onExpandRow: function (index, row, $detail) {
                    //这一步就是相当于在当前点击列下新创建一个table
                    if (row) {
                        var data = row.appealDetails;
                        var explainBox = $('<div class="explainBox">' +
                            '<ul>' +
                            '<li data-scene="'+row.scene+'" data-classification="'+row.classification+'">' +
                            '<div class="ruleBox">命中时间：' +
                            '</div>' +
                            '</li>' +
                            '</ul>' +
                            '</div>');
                        var ruleBox = explainBox.find(".ruleBox");
                        for (var i = 0; i < data.length; i++) {
                            var startTime = data[i].startTime;// 开始时间
                            var endTime = data[i].endTime;// 结束时间
                            var matchStatus = data[i].matchStatus;// 匹配错误
                            var proNote = base.isNull(data[i].proNote);// 错误备注
                            ruleBox.append('<div class="timeBox timeBox'+index+i+'" data-index="'+i+'" data-row-index="'+index+'">' +
                                '<span class="ruleTime" data-sTime="' + startTime + '" data-eTime="' + endTime + '"><i class="fa fa-volume-up"></i>' + base.formatSeconds(startTime) + '-' + base.formatSeconds(endTime) + '</span>' +
                                '<button class="btn btn-primary errorBtn">匹配错误</button>' +
                                '<span class="hidden timeRemark">备注:'+proNote+'</>' +
                                '</div>');
                            //匹配错误按钮是否可点
                            if(matchStatus == '1'){
                                ruleBox.find('.timeBox'+index+i).find('.errorBtn').prop('disabled',true)
                            }
                            //是否显示备注 备注不为空显示 备注为空不显示
                            if(proNote){
                                ruleBox.find('.timeBox'+index+i).find('.timeRemark').removeClass('hidden')
                            }
                            var jsonStr = JSON.stringify(data[i]);
                            ruleBox.find('.timeBox').attr("data-detail", jsonStr);
                        }
                        $detail.html(explainBox); // 关键地方
                    }
                }
            });
        };
        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                serialNumber: $("#serialNumber").html(),
                scenes: $('#scenes').html()
            };
            return temp;
        };
        return oTableInit;
    };
    var rule = {
        selectRuleArr: [],
        isOpen:false,
        isOpenYu:false,
        init: function () {
            var oTable = new TableInit();
            oTable.Init();
            var oTableS = new TableInitS();
            oTableS.Init();
            rule.ruleDblclick();
            rule.errorTagOne();
            $("#table,#tableS").on("click", ".detail", function () {
                var i=$(this).find("i");
                var glyphicon="";
                var table = $(this).parents('table');
                if(i.hasClass("glyphicon-chevron-down")){
                    if(table.attr('id') == 'table'){
                        rule.isOpen=true;
                    }else{
                        rule.isOpenYu=true;
                    }
                    glyphicon="glyphicon-chevron-down";
                }else{
                    if(table.attr('id') == 'table'){
                        rule.isOpen=true;
                    }else{
                        rule.isOpenYu=true;
                    }
                    glyphicon="glyphicon-chevron-up";
                }
                table.find('tbody tr').each(function(){
                    var icon=$(this).find(".detail-icon");
                    var iElem=icon.find("i");
                    if(iElem.hasClass(glyphicon)){
                        icon.click();
                    }
                })
            });
        },
        ruleDblclick: function () {
            $('#table,#tableS').on("click", ".ruleTime", function (event) {
                var sTime = parseFloat($(this).attr('data-sTime'));
                var eTime = parseFloat($(this).attr('data-eTime'));
                if (sTime!=null && eTime!=null) {
                    wave.playRegion(sTime, eTime);
                }
            });
        },
        tableRefresh: function (elem) {
            elem.bootstrapTable("refresh");
        },
        refreshOne:function(elem){
            elem.find('.errorBtn').prop('disabled',true);
            elem.find('.timeRemark').removeClass('hidden');
            elem.find('.timeRemark').html('备注:'+$("#remark").val())
            elem.parents('tr.detail-view').prev().find('.abstract span').html('(匹配错误)')
        },
        errorTagOne: function () {
            //点击匹配错误
            $("#table,#tableS").on("click", ".errorBtn", function () {
                $("#remark").val("")
                rule.remarkModalShow($(this));
            });
            //点击备注修改备注
            $("#table,#tableS").on("click", ".timeRemark", function () {
                $("#remark").val($(this).html().substr(3));
                rule.remarkModalShow($(this));
            });
            //保存备注信息
            $("#tagErrorBtn").on("click", function () {
                var detail = JSON.parse($("#errorTagModal").attr("data-detail"));
                var index = $("#errorTagModal").attr("data-index");
                var rowIndex = $("#errorTagModal").attr("data-row-index");
                var code = $("#errorTagModal").attr("data-code");
                if($("#remark").val()==""){
                    toastrCog.error('请输入备注!')
                    return
                }
                if(code == 'tag'){
                    var tagId = $("#errorTagModal").attr("data-tagId");
                    $.ajax({
                        type: "post",
                        url: basePath + "/rest/tagging/judge-tagging-error",
                        dataType: "json",
                        data: {
                            serialNumber: $("#serialNumber").html(),
                            tagId: tagId,
                            matchStatus: 1,
                            proNote: $("#remark").val(),
                            startTime: detail.startTime,
                            endTime: detail.endTime
                        },
                        success: function (data) {
                            if (data.code == 0) {
                                toastrCog.success(data.msg, 1000);
                                rule.refreshOne($('#table tbody tr .timeBox'+rowIndex+index));
                            } else {
                                toastrCog.error(data.msg, 3000);
                            }
                            $("#errorTagModal").modal("hide");
                        }
                    })
                }else{
                    var classification = $("#errorTagModal").attr("data-classification");
                    var scene = $("#errorTagModal").attr("data-scene");
                    $.ajax({
                        type: "post",
                        url: bs.getSysConfig("ZDYW_KEY").value + "/semanticTag/updateAppealsById",
                        dataType: "json",
                        data: {
                            serialNumber:$("#serialNumber").html(),
                            matchStatus: 1,
                            classification:classification,
                            scene:scene,
                            proNote: $("#remark").val(),
                            startTime: detail.startTime,
                            endTime: detail.endTime
                        },
                        success: function (data) {
                            if (data.code == 1) {
                                toastrCog.success(data.message, 1000);
                                rule.refreshOne($('#tableS tbody tr .timeBox'+rowIndex+index));
                            } else {
                                toastrCog.error(data.message, 3000);
                            }
                            $("#errorTagModal").modal("hide");
                        }
                    })
                }


            })
        },
        remarkModalShow:function(elem){
            var table = elem.parents("table");
            var timeBox = elem.parents(".timeBox");
            var $li = elem.parents("li");
            var detail = timeBox.attr("data-detail");
            var index = timeBox.attr("data-index");
            var rowIndex = timeBox.attr("data-row-index");
            $("#errorTagModal").modal("show").attr({
                "data-detail": detail,
                "data-index": index,
                "data-row-index": rowIndex
            });
            if(table.attr('id') == 'table'){//标签
                var tagId = $li.attr("data-tagId");
                $("#errorTagModal").modal("show").attr({
                    "data-tagId": tagId,
                    "data-code": 'tag'
                });
            }else{//语义
                var classification = $li.attr("data-classification");
                var scene = $li.attr("data-scene");
                $("#errorTagModal").modal("show").attr({
                    "data-classification": classification,
                    "data-scene": scene,
                    "data-code": 'yuyi'
                });
            }
        }
    };
    $(function () {
        wave.init();
        tools.init();
        base.init();
        stt.init(true);
        tag.init();
        rule.init();
        setTimeout(function(){
            resize.init();
        },200)
        $('.markSpan[data-code="'+$('#source').text()+'"]').click();
    })
</script>
</body>
</html>